<template>
  <div class="w-100 h-100 d-flex">
    <div class="left h-100" style="flex: 1; width: 0">
        <div id="ysytqk" style="width: 100%; height: 100%;"></div>
    </div>
    <div class="right h-100" style="width: 324px">
      <fakeLenfend
        style="width: 100%; height: 90%; justify-content: center"
        :color="list.map((item) => item.itemStyle.color)"
        :text="list.map((item) => item.name + ' ' + item.value + '万m²')"
        :value="list.map(item => ((item.value / allCount) * 100).toFixed(2) + '%')"
        orient="column"
      >
      </fakeLenfend>
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import fakeLenfend from "@/components/project/fakeLegend.vue";

function generateData(totalNum, bigvalue, smallvalue, color) {
  let dataArr = [];
  for (var i = 0; i < totalNum; i++) {
    if (i % 2 === 0) {
      dataArr.push({
        name: (i + 1).toString(),
        value: bigvalue,
        itemStyle: {
          normal: {
            color: color,
            borderWidth: 0,
          },
        },
      });
    } else {
      dataArr.push({
        name: (i + 1).toString(),
        value: smallvalue,
        itemStyle: {
          normal: {
            color: "rgb(0,0,0,0)",
            borderWidth: 0,
          },
        },
      });
    }
  }
  return dataArr;
}
let threeData = generateData(10, 40, 10, "#5CE1FF");
let startAngle = 50; // 初始旋转角度

const option = {
  tooltip:{
    show: true,
    backgroundColor: "rgba(255,255,255,0.75)",
    extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
    textStyle: {
      fontSize: 14,
      color: "#000",
    },
  },
  title: [
    {
      text: "",
      x: "center",
      y: "42%",
      textStyle: {
        fontSize: 24,
        fontWeight: "normal",
        color: "#fff",
      },
    },
    {
      text: "总量(m²)",
      x: "center",
      y: "52%",
      textStyle: {
        fontSize: 20,
        fontWeight: "normal",
        color: "#fff",
      },
    },
  ],

  series: [
    {
      name: "",
      type: "pie",
      clockWise: true,
      hoverAnimation: false,
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      radius: ["40%", "50%"],
      center: ["50%", "50%"],
      data: [],
    },
    {
      type: "pie",
      name: "旋转圆",
      zlevel: 20,
      silent: true,
      radius: ["57%", "56%"],
      hoverAnimation: false,
      startAngle: startAngle,
      data: threeData,
      label: {
        normal: {
          show: false,
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
    },
  ],
};

let myChart: any;

onMounted(() => {
  myChart = echarts.init(document.getElementById("ysytqk") as HTMLElement);
  myChart.setOption(option);
});

const dataList = [
  { name: "灌溉", color: "#5CE1FF" },
  { name: "家庭用水", color: "#B8EB8F" },
  { name: "景观用水", color: "#FE7E1D" },
  { name: "工业用水", color: "#FBD8A0" },
  { name: "地下补给水", color: "#60FFCE" },
];

const jsonData: any = inject("jsonData");
const current = computed(() => {
  let data = [];
  try {
    data = jsonData.value.yxjk.ysytqk;
  } catch (error) {}

  return data;
});

const list = ref([]);
const allCount = ref(0)

watch(
  () => current.value,
  (val) => {
    if (val) {
      allCount.value = val.reduce((pre: number, cur: number) => pre + cur);

      const data = val.map((value: any, index: number) => ({
        ...dataList[index],
        value,
        itemStyle: {
          color: dataList[index].color,
        },
      }));
      list.value = data;

      myChart.setOption({
        title: [
          {
            text: allCount.value + '万',
          },
        ],
        series: [{ data }],
      });
    }
  }
);
</script>

<style scoped lang="less"></style>
